<template>
<div style="width: 100%;height: 100%;">
	<div style="width:100%;height:10vh;background-color: #dadada;">
		<div class="inner">
		<el-input
		  v-model="data.input"
		  style="width: 200px"
		  placeholder="请输入查询的商品名称"
		  clearable
		/>
		    <el-button @click="search(data.input)" :icon="Search" circle />
		  </div>
	</div>
	<div id="">
	
		<div id="">
			<el-row :gutter="20">
			  <el-col :span="8" v-for="x in data.goods" ><!-- @click="goAdd(x.bookid)" -->
			    <el-card class="shadow-md transition-transform hover:scale-105">
			      <template #header>
			        <div class="w-10vw h-10vw">
			          <img :src="`/api/public/findgoodsimg/${x.gid}`" class="h-full w-full image-zoom" />
			        </div>
			      </template>
			      <div class="p-4">
			        <p class="text-sm mb-2 image-zoom">{{ x.bookname }}</p>
			        <div class="flex justify-between items-center">
			          <h3 class="text-red-500">原价: {{ x.price }}￥</h3>
			          <h3 class="text-red-500">会员价: {{ x.vip }}￥</h3>
			          <p class="text-gray-500 text-sm">{{ x.reviews }} 人评价</p>‌‌
							<el-button @Click="addCart(x)" type="warning"  :icon="Star" circle />
			        </div>
			      </div>
			    </el-card>
			  </el-col>
			</el-row>
		</div>
		
		
	</div>
	
</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { $get, $postx, $postf } from "../../ajax/index.js";
import myalert from "../../utils/myalert.js";
import alert from "../../components/Alert.vue";
import store from "../../store/index.js";
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'	
const data=reactive({
	goods:[],
})
const route = useRoute()
onMounted(()=>{
	$get('/api/adm/goods/findonebookname/'+route.query.bookname)
	.then((resp)=>{
		console.log(resp.data.data);
		data.goods=resp.data.data;
	})
})

</script>

<style>
	/* 搜索框的定位 */
	.inner{
		width: 300px;
		position: absolute;
		top: 12%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
